<template>
  <el-drawer
    :model-value="useStore.personal"
    :show-close="false"
    :before-close="handleClose"
    :append-to-body="true"
    size="min(500px, 100%)"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="userHeader">
        <h4 :id="titleId" :class="titleClass">个人中心</h4>
        <div class="close">
          <el-icon @click="close" size="25"><Back /></el-icon>
        </div>
      </div>
    </template>
    <div class="user">
      <UploadableAvatar
          :avatar="useStore.avatar" @upload="handleAvatar"
          :style="{width: 'min(100%, 128px)', height: 'min(100%, 128px)', borderRadius: '50%'}"
      />

      <template v-if="userinfo">
        <InputPro style="max-width: 200px;border-radius: 4px;overflow: hidden" v-model="userinfo.name" placeholder="请输入新的昵称" @change="handleRename" />
        <div>邮箱：{{userinfo.email}}</div>
        <div>注册时间：{{userinfo.createdTime}}</div>
        <button class="btn" @click="loginOut">退出登录</button>
      </template>
    </div>
  </el-drawer>
</template>

<script setup>
import UploadableAvatar from "@/components/UploadableAvatar.vue"
import InputPro from "@/components/InputPro.vue";

const useStore = useHomeStore();
import {uploadAvatar, setUserName} from '@/api/user.js'
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useHomeStore } from "@/stores/home";
import { Back } from "@element-plus/icons-vue";
const { userinfo } = storeToRefs(useStore);
const router = useRouter();

/**
 * 处理上传头像事件
 * @param file
 */
const handleAvatar = file => {
  uploadAvatar(file).then(res => {
    if (res.code === 20000) {
      ElMessage({
        showClose: true,
        message: '上传成功',
        type: "success",
      });
      useStore.userinfo.avatar = res.retData
    }
  })
}

/**
 * 处理修改昵称事件
 */
const handleRename = () => {
  setUserName(userinfo.value.name).then(res => {
    ElMessage({
      showClose: true,
      message: '修改成功',
      type: "success",
    });
  })
}

const handleClose = () => {
  useStore.personal = false;
};

const loginOut = () => {
  ElMessageBox.confirm("您确认退出登陆吗？", "退出登录", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    center: true,
    confirmButtonClass:"btnClass",
    cancelButtonClass:"btnClass"
  })
    .then(() => {
      localStorage.removeItem("token");
      location.href = '/login'

      ElMessage({
        showClose: true,
        message: '退出成功',
        type: "success",
      });
      // router.push("/login");
    })
};
</script>

<style lang="less" scoped>
.userHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  h4 {
    position: absolute;
    right: 43%;
    top: 3%;
  }
  .close {
    position: absolute;
    left: 6%;
    top: 2.5%;
    cursor: pointer;
  }
}
.user {
  width: 100%;
  height: 20rem;
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: center;

  img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  .btn {
    width: 6.5rem;
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    border-radius: 6px;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
    overflow: hidden;
    transition: color 0.4s ease-in-out;
  }
  .btn::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #3cefff;
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transition: transform 0.45s ease-in-out;
  }

  .btn:hover {
    cursor: pointer;
    color: #161616;
  }

  .btn:hover::before {
    transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
  }
}
</style>
<style>
.el-message-box {
  border-radius: 10px !important;
}
.btnClass {
  z-index: 1;
  position: relative;
  font-size: 14px;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(236, 32%, 26%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

.btnClass::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

.btnClass:hover {
  cursor: pointer;
  color: #161616;
}

.btnClass:hover::before {
  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}

  .btnClass{
    background-color: black !important;
  }
  .btnClass span{
    color: #fff;
  }
  .btnClass span:hover{
    color: #161616 !important;
  }
</style>